<template>
  <div class="app-home__nav-list">
    <van-grid
      class="gridone"
      column-num="5"
      icon-size="59px"
      :border="false"
      gutter=0
    >
      <van-grid-item width="1.44rem" height="1.52rem" :url="item.url" v-for="item in list" :key="item.navid" :icon="item.imgurl"  />
    </van-grid>
    <van-image
    class="one"
  width="210px"
  height="320px"
  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/16305100fd7913dd727e8906b97e8998.png?f=webp&w=537&h=762&bg=DDE2E6"
/>
<van-image
  class="two"
  width="155px"
  height="160px"
  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f8a28a90c3c449ba422a10e40085d2e9.png?f=webp&w=537&h=378&bg=DBDEEF"
/>
<van-image
  class="three"
  width="155px"
  height="160px"
  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/200a6f45d1ccbf7d8fd92f4bbe2842d4.jpeg?f=webp&w=537&h=378&bg=F3E7E7"
/>
<van-image
  class="four"
  width="100%"
  height="320"
  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/051b383d45f1fad5aa3bfae8851af7c4.png?f=webp&w=1080&h=660&bg=FFFFFF"
/>
 </div>
</template>
<script>
import Vue from 'vue'
import { Grid, GridItem } from 'vant'

Vue.use(Grid)
Vue.use(GridItem)
export default {
  name: 'HomeNavList',
  data () {
    return {
      list: [
        { navid: 1, title: '米金商城', imgurl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b1749080cf5bbc4dfebff83013bbebaf.png?f=webp&w=216&h=228&bg=FFFFFF', url: 'https://s1.mi.com/m/appdownload/index.html?masid=17409.0380&enter=1' },
        { navid: 2, title: '小米众筹', imgurl: 'https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp?w=216&h=228&bg=EAF6FD', url: 'https://m.mi.com/crowdfunding/home?spmref=MiShop_M.cms_26.3441276.2&scmref=cms.0.0.0.0.0.0.0' },
        { navid: 3, title: '手机', imgurl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/69c250436545049ccab81c3e32033cf2.png?f=webp&w=216&h=228&bg=FFFFFF', url: 'https://m.mi.com/w/mishop_activity?_rt=weex&pageid=602&sign=3a64dfb332169745a1919b56eb0fdde4&pdl=jianyu&spmref=MiShop_M.cms_26.3441276.3&scmref=cms.0.0.0.0.0.0.0' },
        { navid: 4, title: '以旧换新', imgurl: 'https://i8.mifile.cn/v1/a1/e8bc849a-0a3b-21a0-6810-7da3a3903dee.webp?w=216&h=228&bg=FDEFDE', url: 'https://m.mi.com/recycling/index?headless=1&needValidHost=false&spmref=MiShop_M.cms_26.3441276.4&scmref=cms.0.0.0.0.0.0.0' },
        { navid: 5, title: '小米上新', imgurl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0434594382110f3bd15c90f040d5d542.jpg?f=webp&w=216&h=228&bg=FFFFFF', url: 'https://s1.mi.com/m/app/hd/index.html?id=product_channel_page&spmref=MiShop_M.cms_26.3441276.5&scmref=cms.0.0.0.0.0.0.0' },
        { navid: 6, title: '智能', imgurl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/64f3988b6216e4c1ab62a7f50df3e816.png?f=webp&w=216&h=228&bg=FFFFFF', url: 'https://m.mi.com/channel/all/14709?sign=&spmref=MiShop_M.cms_26.3441277.1&scmref=cms.0.0.0.page.14709.0.0' },
        { navid: 7, title: '笔记本热卖', imgurl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ea68dee2bfa0e55a82236b0d968e975.png?w=216&h=228&bg=FCEAEA', url: 'https://m.mi.com/channel/all/13326?sign=&spmref=MiShop_M.cms_26.3441277.2&scmref=cms.0.0.0.page.13326.0.0' },
        { navid: 8, title: '电视热卖', imgurl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/96c780016ea196743905dc93f9249c39.png?w=216&h=228&bg=FDF5E5', url: 'https://m.mi.com/channel/all/13249?sign=&spmref=MiShop_M.cms_26.3441277.3&scmref=cms.0.0.0.page.13249.0.0' },
        { navid: 9, title: '洗衣机热卖', imgurl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9425031cdd7af22d9a23a5ae16d1f57c.jpg?f=webp&w=216&h=228&bg=FFFFFF', url: 'https://m.mi.com/channel/all/13365?sign=&spmref=MiShop_M.cms_26.3441277.4&scmref=cms.0.0.0.page.13365.0.0' },
        { navid: 10, title: '米粉卡', imgurl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f11f9df6b0b0b428f8c8fc3267131830.png?w=216&h=228&bg=FDEDE8', url: 'https://service.10046.mi.com/channel/?spmref=MiShop_M.cms_26.3441277.5&scmref=cms.0.0.0.0.0.0.0' }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.app-home__nav-list {
  position: relative;
  .gridone {
    padding: 0 !important;
  }
}
.two{
  position: absolute;
}
</style>
